<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 2</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <!-- 第一章 vue初探/1-3编写字符串反转和内容隐藏小功能 -->
</body>
<script>
    Vue.createApp({
        data(){
            return{
            content:'hello world'
            }
        },
        methods: {
            handleBtnClick(){
               this.content="dlrow olleh"
            }
        },
        //template模板
        template:`<div>{{content}}
            // 绑定一个点击事件
            <button v-on:click="handleBtnClick">反转</button>
            </div`
    }).mount('#root')
    // 只作用于root中使用


    // 将内容隐藏起来 
    Vue.createApp({
        data() {
            return {
                show: true,
                content: ''
            };
        },
        methods: {
            handleBtnClick() {
                this.show = !this.show;
            }
        },
        template: 
            `<div>
               <span v-if="show">Hello world</span>
                 <button v-on:click="handleBtnClick">显示/隐藏</button>
            </div>`
    }).mount('#root')
</script>
</html>